import React, { Component } from 'react'
import axios from 'axios'
import './Top250.css'
export default class Top250 extends Component {
    constructor(props){
        super(props)
        this.state={
            movies:[]
        }
    }
    render() {
        const MovieList=this.state.movies.map(item=>{
            return (
                <div  key={item._id} className="item">
                    <img className="pic" src={item.pic} alt=""></img>
                    <div className="content">
                        <div className="name">{item.title}</div>
                        <div className="rating">观众评分 <span>{item.rating}</span></div>
                        <div className="type">{item.type}</div>
                    </div>
                    <button className="btn">购票</button>
                </div>
            )
        })
        return (
            <div>
                {MovieList}
            </div>
        )
    }
    componentDidMount(){
        axios.get('http://localhost:4000/api/movie?m=top250').then(res=>{
            this.setState({
                movies:res.data.result
            })
        })
    }
}
